<template>
  <div class="avatar-container">
    <img
      class="avatar-img"
      :src="props.src"
      :style="{ width: props.width + 'px', height: props.width + 'px' }"
      alt=""
    />
  </div>
</template>

<script setup>
// import { defineProps } from "vue";
const props = defineProps({
  width: {
    type: Number,
    default: 50,
  },
  src: {
    type: String,
    default: "",
  },
});
</script>

<style scoped>
.avatar-img {
  object-fit: cover;
  border-radius: 50%;
}

.avatar-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
